<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/8/6 0006
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>分页教师</title>
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
</head>
<body>

<table class="table table-hover">
    <tr>
        <th>员工编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>操作</th>
    </tr>
    <tbody id="tab"></tbody>
    <tr>
        <td colspan="8">
            <ul class="pagination" id="pagination1"></ul>
        </td>
    </tr>
</table>
<script>
    var total = 0;//总条数
    var totalPages = 0;//总页数
    var visiblePages = 5;//显示的页码数
    var currentPage = 0;//当前页码
    $(document).ready(function(){
        /* 第一次访问，初始化全局变量 */
        showPage(-1);

        $('#pagination1').jqPaginator({
            totalPages: totalPages,
            visiblePages: visiblePages,
            currentPage: currentPage,
            totalCounts: total,
            first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last: '<li class="last"><a href="javascript:void(0);">最后一页</a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num) {
                /* num代表改变过后的页码 */
                showPage(num);
            }
        });
    });

    function showPage(n){
        $.ajax({
            url:"<%=basePath%>admin/queryTeacher",
            async:false,//同步请求（默认）
            type:"POST",
            dataType:"json",
            data:{"pageNum":n,"pageSize":4},
            success:function(data){
                console.log(data);
                if(n==-1){/*理解为第一次访问 ，初始化全局变量 */
                    total = data.total;
                    totalPages = data.pages;
                    currentPage = data.pageNum;
                }
                $("#tab").html("");
                if(data.list.length>0){
                    //使用jquery形式遍历
                    $.each(data.list,function(n,val){
                        var str = "";
                        str+="<tr>"+
                            "<td>"+val.tid+"</td>"+
                            "<td>"+val.tno+"</td>"+
                            "<td>"+val.tname+"</td>"+
                            "<td>"+val.tpwd+"</td>"+
                            "<td>"+val.sex+"</td>"+
                            "<td>"+val.address+"</td>"+
                            "<td>"+val.age+"</td>"+
                            "<td><a class=\"btn btn-default\" role=\"button\">删除</a><a class=\"btn btn-default\" role=\"button\" >修改</a></td>"+
                            "</tr>";
                        $("#tab").append(str);
                    });
                }else{
                    $("#tab").append("<tr><td colspan=8 align=\"center\">暂时没有数据哦，快去添加一条吧</td></tr>");
                }
            },
            error:function(){
                alert("服务器出错！");
            }
        });
    }
</script>
</body>
</html>
